<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">员工编码:</span>
					<el-input v-model="search.empNum" placeholder="请输入员工编码" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">姓名:</span>
					<el-input v-model="search.name" placeholder="请输入姓名" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">性别:</span>
					<el-select v-model="search.sex" placeholder="全部" style="width: 180px; margin-left: 10px" clearable>
						<el-option label="全部" value=""></el-option>
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">在职状态:</span>
					<el-select v-model="search.status" placeholder="全部" style="width: 180px; margin-left: 10px"
						clearable>
						<el-option label="全部" value=""></el-option>
						<el-option label="在职" :value="0"></el-option>
						<el-option label="离职" :value="1"></el-option>
					</el-select>
				</div>
				<!-- <div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">职位:</span>
					<el-input v-model="search.post" placeholder="请输入职位" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div> -->

				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px;">职位:</span>
					<el-select v-model="search.post" clearable filterable remote placeholder="请输入关键词搜索"
						:remote-method="remoteMethod2" :loading="loading" style="margin-left: 10px;width: 180px">
						<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>

				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px;">岗位:</span>
					<el-select v-model="search.posn" clearable filterable remote placeholder="请输入关键词搜索"
						:remote-method="remoteMethod" :loading="loading" style="margin-left: 10px;width: 180px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>

				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">部门:</span>
					<el-input v-model="search.dept" placeholder="请输入部门" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">上级编码:</span>
					<el-input v-model="search.empNumPid" placeholder="请输入上级编码" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">上级名称:</span>
					<el-input v-model="search.empPname" placeholder="请输入上级名称" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main>
			<scTable ref="table" :apiObj="apiObj" border :params="params" stripe remoteSort remoteFilter
				@selection-change="selectionChange">
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->

				<el-table-column label="员工编码" fixed="left" prop="empNum" align="center" width="130"></el-table-column>
				<el-table-column label="姓名" fixed="left" prop="name" align="center" width="130"></el-table-column>
				<el-table-column label="直接上级编码" prop="empNumPid" align="center" width="130"></el-table-column>
				<el-table-column label="直接上级名称" prop="empPname" align="center" width="130"></el-table-column>
				<el-table-column label="性别" prop="sex" align="center" width="130"></el-table-column>
				<el-table-column label="在职状态" prop="status" align="center" width="130">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 0" type="success">在职</el-tag>
						<el-tag v-else-if="scope.row.status == 1" type="danger">离职</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="职位" prop="post" align="center" width="130"></el-table-column>
				<el-table-column label="岗位" prop="posn" align="center" width="130"></el-table-column>

				<!-- <el-table-column label="电话" prop="phone" align="center" width="200"></el-table-column> -->
				<el-table-column label="ldap" prop="ldap" align="center" width="130"></el-table-column>
				<el-table-column label="部门" prop="dept" align="center" width="220"></el-table-column>
				<el-table-column label="邮箱" prop="email" align="center" width="220"></el-table-column>

				<el-table-column label="操作" fixed="right" align="center" width="220">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
								@click="table_show(scope.row, scope.$index)">查看详情</el-button>
							<el-button text type="primary" size="small"
								@click="table_edit(scope.row, scope.$index)">编辑</el-button>
							<el-button text type="primary" size="small"
								@click="table_custo(scope.row, scope.$index)">我的客户</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<!-- <el-drawer v-model="dialog.edit" :size="400" title="权限设置" custom-class="drawerBG" direction="rtl" destroy-on-close> -->
	<editDialog v-if="dialog.edit" ref="editDialog" @success="handleSuccess" @closed="dialog.edit = false"
		@guanbi="close">
	</editDialog>
	<customer v-if="customerVisible" ref="customer" @success="handleSuccess" @closed="customerVisible = false"
		@guanbi="close"></customer>
	<!-- </el-drawer> -->
	<!-- <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog> -->
	<!-- <send-dialog v-if="dialog.send" ref="sendDialog" @success="handleSuccess" @closed="dialog.save = false"></send-dialog> -->
	<!-- <edit-dialog
		v-if="dialog.edit"
		ref="editDialog"
		@success="handleSuccess"
		@closed="dialog.edit = false"
		@guanbi="close"
	></edit-dialog> -->
</template>

<script>
import editDialog from './edit'
import customer from './customer.vue'
import Item from '@/components/scContextmenu/item.vue'
export default {
	name: 'emp',
	components: {
		editDialog,
		customer
	},
	data() {
		return {
			dialog: {
				info: false
			},
			customerVisible: false,
			search: {},
			apiObj: this.$API.emp.list,
			params: {},
			detail: {}, // 此处新增 detail 状态用于保存查看详情的数据
			posnOptions: [],
			options: [],
			options2: []
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},
	async created() {
		this.render()

	},

	methods: {
		async render() {
			var res = await this.$API.emp.posnList.get({ data: {} })
			// console.log('岗位数据', res);
			let data = [...res.data]
			this.posnOptions = data.map(item => {
				return { value: item, label: item };
			});


			var res2 = await this.$API.emp.postList.get({ data: {} })
			// console.log('职位数据', res);
			let data2 = [...res2.data]
			this.postOptions = data2.map(item => {
				return { value: item, label: item };
			});

		},
		remoteMethod(query) {
			// console.log('岗位数据', query);
			if (query !== '') {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.options = this.posnOptions.filter(item => {
						return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
					});
				}, 200);
			} else {
				this.options = [];
			}
		},

		remoteMethod2(query) {
			// console.log('职位数据', query);
			if (query !== '') {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
					this.options2 = this.postOptions.filter(item => {
						return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
					});
				}, 200);
			} else {
				this.options2 = [];
			}
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				// console.log(row)
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		// 分配
		table_custo(row) {
			this.customerVisible = true
			this.$nextTick(() => {
				this.$refs.customer.open('customer').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable == 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code == 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('show').setData(row)
			})
		},

		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		handleSuccess() {
			// if (mode == 'add') {
			// 	data.id = new Date().getTime()
			// 	this.$refs.table.tableData.unshift(data)
			this.$refs.table.refresh()
			// } else if (mode == 'edit') {
			// 	this.$refs.table.tableData
			// 		.filter((item) => item.id === data.id)
			// 		.forEach((item) => {
			// 			Object.assign(item, data)
			// 		})
			// }
		}
	}
}
</script>
